<template>
  <div :style="{margin:margin}">
    <div>
      <el-form :inline="true" label-width="70px" label-position="left">
        <div v-show="isShowSearch" class="head-container">
          <template v-for="(query,i2) in querys">
            <el-form-item :key="i2*2+1">
              <!-- 只能从后往前删除查询条件，否则会出现会先错误 -->
              <el-select v-model="query.type" :clearable="querys.length-1 == i2" placeholder="类型" size="small" style="width: 130px" @change="changeQueryInputType(i2)">
                <template v-for="item in cols">
                  <el-option  v-if="item.search && isInQuerys(item.prop)" :key="item.prop" :label="item.label" :value="item.prop" />
                </template>
              </el-select>
            </el-form-item>
            <!-- 搜索 -->
            <el-form-item :key="i2*2">
              <template v-for="(item,index) in cols">
                <el-input v-if="index==0 && query.type===''" :key="index" v-model="query.value" clearable placeholder="输入搜索内容" size="small" class="filter-item" />
                <el-input v-else-if="item.searchType==='string' && item.prop===query.type" :key="index" v-model="query.value" clearable placeholder="输入搜索内容" size="small" class="filter-item" />
                <el-select v-else-if="item.searchType==='radio' && item.prop===query.type" :key="index" v-model="query.value" size="small" class="filter-item">
                  <el-option
                    v-for="dict in dicts[query.type]"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
                <el-select
                  v-else-if="item.searchType==='checkbox' && item.prop===query.type"
                  :key="index"
                  v-model="query.value"
                  size="small"
                  class="filter-item"
                  multiple
                  filterable
                >
                  <el-option
                    v-for="dict in dicts[query.type]"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
                <el-date-picker
                  v-else-if="item.searchType==='date' && item.prop===query.type"
                  :key="index"
                  v-model="query.value"
                  class="filter-item"
                  size="small"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </template>
            </el-form-item>
          </template>
          <el-form-item>
            <el-button size="small" type="success" icon="el-icon-more" :disabled="querys[querys.length-1].type === ''" @click="addCondition">更多条件</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
          </el-form-item>
          <div style="float:right" v-if="isShowTwo == false">
            <el-button-group>
              <span><el-button size="small" icon="el-icon-search" v-if="isShowTwo" @click="isShowSearch = !isShowSearch" /></span>
              <span><el-button size="small" icon="el-icon-refresh" @click="toQuery" /></span>
              <el-popover
                placement="right"
                width="200"
                trigger="click"
              >
                <div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-col v-for="(item2,index2) in cols" :key="index2" :span="24">
                    <template v-if="dropCols[index2].tempType !== 'hidden'">
                      <el-checkbox
                        :model="dropCols[index2].type !== 'hidden'"
                        @change="showHide(dropCols[index2].label)"
                      >{{ dropCols[index2].label }}</el-checkbox>
                    </template>
                  </el-col>
                </div>
                <el-button slot="reference" size="small" icon="el-icon-s-grid" />
              </el-popover>
            </el-button-group>
          </div>
        </div>
        <div class="head-container">
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="toAdd">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="danger" :disabled="this.sels.length === 0" icon="el-icon-delete" @click="deleteBatch">批量删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-popover
              placement="bottom"
              width="234"
              trigger="click"
            >
              <div>
                <el-button size="small" type="success" icon="el-icon-download" @click="downloadFile('1')">下载模板</el-button>
                <el-button size="small" type="success" icon="el-icon-upload" @click="uploadFile">上传数据</el-button>
              </div>
              <el-button slot="reference" size="small" type="success" icon="el-icon-upload">上传</el-button>
            </el-popover>
          </el-form-item>
          <el-form-item>
            <el-popover
              placement="bottom"
              width="234"
              trigger="click"
            >
              <div>
                <el-button size="small" type="success" icon="el-icon-download" @click="downloadFile('2')">下载本页</el-button>
                <el-button size="small" type="success" icon="el-icon-download" @click="downloadFile('3')">下载所选</el-button>
                <el-button size="small" type="success" icon="el-icon-download" @click="downloadFile('4')">下载所有</el-button>
              </div>
              <el-button slot="reference" size="small" type="success" icon="el-icon-download">下载</el-button>
            </el-popover>
          </el-form-item>
          <div style="float:right" v-if="isShowTwo">
            <el-button-group>
              <span><el-button size="small" icon="el-icon-search" @click="isShowSearch = !isShowSearch" /></span>
              <span><el-button size="small" icon="el-icon-refresh" @click="toQuery" /></span>
              <el-popover
                placement="right"
                width="200"
                trigger="click"
              >
                <div>
                  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-col v-for="(item2,index2) in cols" :key="index2" :span="24">
                    <template v-if="dropCols[index2].tempType != 'hidden'">
                      <el-checkbox
                        v-model="dropCols[index2].type != 'hidden'"
                        @change="showHide(dropCols[index2].label)"
                      >{{ dropCols[index2].label }}</el-checkbox>
                    </template>
                  </el-col>
                </div>
                <el-button slot="reference" size="small" icon="el-icon-s-grid" />
              </el-popover>
            </el-button-group>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props:{
      // String, Number, Boolean, Function, Object, Array, Symbol
      tableName: { // 表名
          required: true,
          type: String
      },
      querys: { // 查询条件
        required: true,
        type: Array
      },
      cols: { // 列配置
          required: true,
          type: Array
      },
      dropCols: { // 列配置
          required: true,
          type: Array
      },
      dicts: { // 字典配置
          required: true,
          type: Object
      },
      isShowTwo: {
        default: true
      },
      buttonsShow: {
          // eslint-disable-next-line vue/require-valid-default-prop
          default:()=>['condition','add','batchDelete','upload','download'],
          type: Array
      },
      margin: {
          default: '1%'
      }



  },
  data() {
    return {
      // 查询最大长度
      querysMaxLength: 0,
      // 是否显示查询栏
      isShowSearch: true,
      // 表格选中数据
      sels:[],
      isIndeterminate: false,
      // 是否全选展示所有列
      checkAll: true,
      //展示列长度
      showColLength: 0
    }
  },

  methods: {
    // 判断是否已经在查询条件中
    isInQuerys(type) {
      const querys = this.querys
      for (let i = 0; i < querys.length; i++) {
        if (type === querys[i].type) {
          return false
        }
      }
      return true
    },
    // 获取查询条件最大长度
    getQuerysMaxLength() {
      let i = 0
      this.cols.forEach(field => {
        if (field.search) {
          i++
        }
      })
      return i
    },
    // 获取展示列长度
    getShowColLength() {
      let i = 0
      this.cols.forEach(field => {
        if (field.tempType !== 'hidden') {
          i++
        }
      })
      return i
    },
    // 添加查询条件
    addCondition() {
      if (!this.querysMaxLength) {
        this.querysMaxLength = this.getQuerysMaxLength()
      }
      if (this.querys.length < this.querysMaxLength) {
        this.querys.push({ 'type': '', 'value': '' })
      } else {
        this.$message({
          showClose: true,
          message: '条件已用完，没有可查询条件添加了',
          type: 'warning'
        })
      }
    },
    // 查询
    toQuery() {
      const map = this.getMapByQuerys(this.querys)
      this.$emit('change','map',map)
      this.$emit('getData')
    },
    //展示和隐藏数据列
    showHide(label) {
      let flag
      const dropCols = this.dropCols
      for (let i = 0; i < dropCols.length; i++) {
        const dropCol = this.dropCols[i]
        if (dropCol.label === label) {
          flag = dropCol.type === 'hidden'
          if (flag === true) {
            dropCol.type = dropCol.tempType
          } else {
            dropCol.type = 'hidden'
          }
          break
        }
      }

      const cols = this.cols
      for (let j = 0; j < cols.length; j++) {
        const col = cols[j]
        if (col.label === label) {
          if (flag === true) {
            col.type = col.tempType
          } else {
            col.type = 'hidden'
          }
          break
        }
      }

      let index = 0
      dropCols.forEach(dcol => {
        if (dcol.type !== 'hidden') {
          index++
        }
      })
      if (this.showColLength === 0) {
        this.showColLength = this.getShowColLength()
      }
      this.checkAll = this.showColLength === index
      this.isIndeterminate = index > 0 && index < this.showColLength
      this.$emit('change','cols',this.cols)
      this.$emit('change','dropCols',this.dropCols)
    },
    // 数据列全选
    handleCheckAllChange(val) {
      if (val) {
        this.dropCols.forEach(col => {
          if (col.tempType != 'hidden') {
            col.show = true
          }
          col.type = col.tempType
        })
        this.cols.forEach(col => {
          if (col.tempType != 'hidden') {
            col.show = true
          }
          col.type = col.tempType
        })
      } else {
        this.dropCols.forEach(col => {
          col.type = 'hidden'
          col.show = false
        })
        this.cols.forEach(col => {
          col.type = 'hidden'
          col.show = false
        })
      }
      this.$emit('change','cols',this.cols)
      this.$emit('change','dropCols',this.dropCols)
      this.isIndeterminate = false
    },
    // 改变查询类型
    changeQueryInputType(index) {
      if (this.querys.length > 1 && this.querys[index].type === '') {
        this.querys.splice(index, 1)
      } else {
        this.querys[index].value = ''
      }
    },
    // 得到查询条件
    getMapByQuerys(val) {
      const map = {}
      for (let i = 0; i < val.length; i++) {
        const query = val[i]
        const type = query.type
        const value = query.value
        if (type && value) {
          map[type] = value
        }
      }
      return map
    },
    // 添加方法
    toAdd() {
      this.$emit('toAdd')
    },
    deleteBatch() {
      this.$confirm('此操作将永久删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 批量删除
        this.$emit('batchDelete')
      })
    },
    uploadFile() {
      this.$emit('uploadFile')
    },
    downloadFile(type) {
      this.$emit('downloadFile',type, this.tableName)
    }
  },

  computed: {

  },
  watch: {
    querys(val) {
      const map = this.getMapByQuerys(val)
      this.$emit('change','map',map)
    }
  },

  mounted() {

  },
  destroyed() {

  }
}
</script>

<style scoped>
  .filter-item{
    width:130px
  }
</style>
